<template>
  <div class="singer" ref="singer">
    <list-view :data="allSingers" ref="list" @select="selectSinger"></list-view>
    <router-view></router-view>
  </div>
</template>

<script>
  import {getSingerList, normaliseList} from 'api/singer.js';
  import {ERR_OK} from 'api/config.js';
  import ListView from '../base/listview/listview.vue';
  import {mapMutations} from 'vuex';
  import {playlistMixin} from 'common/js/mixin.js';

  export default {
    mixins: [playlistMixin],
    components: {ListView},
    data () {
      return {
        allSingers: []
      };
    },
    methods: {
      selectSinger (singer) {
        this.$router.push(`/singer/${singer.id}`);
        this.setSinger(singer);
      },
      _getSingerList () {
        getSingerList().then((res) => {
          if (res.code === ERR_OK) {
            this.allSingers = normaliseList(res.data.list);
            // console.log(this.allSingers);
          }
        }).catch(e => {
          console.log(e);
        });
      },
      handlePlaylistAction (playlist) {
        const bottom = playlist.length > 0 ? '60px' : '';
        this.$refs.singer.style.bottom = bottom;
        this.$refs.list.refresh();
      },
      ...mapMutations({
        setSinger: 'SET_SINGER'
      })
    },
    created () {
      this._getSingerList();
    }

  };
</script>

<style lang="less" scoped="">
  .singer {
    position: fixed;
    top: 88px;
    bottom: 0;
    width: 100%;
  }
</style>
